import { useMount } from 'ahooks';
import type { RadioChangeEvent } from 'antd';
import { Button, DatePicker, Form, Input, Radio, Select, Space } from 'antd';
import { useState } from 'react';
import { LineRateTrend } from './line-rate-trend/index';
import { ProductStr } from './product-str/index';
import { Ranking } from './ranking/index';
import Example from './sales-achievemen/index';
import { SecondActive } from './second-active/index';
import { SecondMass } from './second-mass/index';
import styles from './index.module.less';

const { Option } = Select;

export default () => {
  useMount(() => {});
  const [form] = Form.useForm();
  const { RangePicker } = DatePicker;
  const [value, setValue] = useState(1);

  const onChange = (e: RadioChangeEvent) => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };

  const searchList = () => {
    return (
      <div className={styles['search']}>
        <Form form={form} name="control-hooks" onFinish={onFinish}>
          <Form.Item name="note" label="一级经销商">
            <Input placeholder="请选择一级经销商" />
          </Form.Item>
          <Form.Item name="gender" label="二级经销商">
            <Select placeholder="请选择二级经销商" allowClear>
              <Option value="male">male</Option>
              <Option value="female">female</Option>
              <Option value="other">other</Option>
            </Select>
          </Form.Item>
          <Form.Item name="note1" label="时间段">
            <Radio.Group onChange={onChange} value={value}>
              <Radio value={1}>本月</Radio>
              <Radio value={2}>本季度</Radio>
              <Radio value={3}>本年</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item name="note1" label="自定义时间段">
            <RangePicker />
          </Form.Item>
          <Form.Item>
            <Space>
              <Button htmlType="button" onClick={onReset}>
                重 置
              </Button>
              <Button type="primary" htmlType="submit">
                查 询
              </Button>
              <Button type="primary" onClick={onFill}>
                下 载
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </div>
    );
  };
  const onFinish = (values: any) => {
    console.log(values);
  };
  const onReset = () => {
    form.resetFields();
  };
  const onFill = () => {
    form.setFieldsValue({ note: 'Hello world!', gender: 'male' });
  };
  return (
    <div className={styles['sales-volume']}>
      {searchList()}
      <Example />
      <LineRateTrend />
      <ProductStr />
      <SecondActive />
      <SecondMass />
      <Ranking />
    </div>
  );
};
